<script setup>
const contactList = [
  { title: '电话', content: '1234567890' },
  { title: '邮箱', content: 'test@example.com' },
  { title: '地址', content: '北京市朝阳区' },
  { title: '邮编', content: '100025' }
]
const navList = [
  { title: '关于乐居养老网', path: '/' },
  { title: '互赢传媒', path: '/contact' },
  { title: '广告服务', path: '/' },
  { title: '联系我们', path: '/' },
  { title: '在线留言', path: '/' },
  { title: '诚聘英才', path: '/' },
  { title: '版权申明', path: '/' }
]
</script>

<template>
  <div class="contact">
    <div class="contact-left">
      <div class="title">
        <div class="left">
          <div v-for="item in 3" style="width: 4px;height: 100%;background-color:#C20002;"></div>
        </div>
        <div class="center">联系我们</div>
        <div class="right">
          <div v-for="(item,index) in 3"
               :style="{transform:'translateX(-'+16*(index+1)+'px)'}"
               style="clip-path: polygon(0 0, 20% 0%, 100% 70%, 50% 100%,30% 100%, 80% 70%,0 0);width: 28px;height: 100%;background:#C20002;"></div>
        </div>
      </div>
      <h2 style="margin-top: 30px">客户服务</h2>
      <div v-for="(item,index) in contactList" :key="item.title"
           style="color: #666666;margin-top: 15px;font-size: 18px">
        {{ item.title }}：{{ item.content }}
      </div>
    </div>
    <div class="contact-right">
      <div class="contact-right-title">
        <el-icon color="orange">
          <Sugar />
        </el-icon>
        分类导航
      </div>
      <div v-for="(item,navIndex) in navList" :key="item.title" class="nav-item">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contact {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 20px;

  &-left {
    flex: 3.6;
    border-top: 3px solid $lt-title-second-color;
    padding: 5px;

    .title {
      display: flex;
      height: 35px;
      align-items: center;
      border-bottom: 3px solid #f1f1f1;
      padding-bottom: 5px;

      .center {
        width: 150px;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #ffffff;
        padding: 0 10px;
        height: 100%;
        background-color: $lt-title-second-color;
        clip-path: polygon(0 0, 85% 0%, 100% 70%, 90% 100%, 0 100%);
      }

      .left {
        height: 100%;
        display: flex;
        gap: 2px;
        margin-right: 2px;
      }

      .right {
        height: 100%;
        display: flex;
        gap: 2px;
        margin-right: 2px;
      }
    }

  }

  &-right {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;

    &-title {
      font-size: 18px;
      padding-left: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      height: 20%;
      background-color: #f1f1f1;
    }

    .nav-item {
      width: 80%;
      background-color: #CECECE;
      border-radius: 5px;
      padding: 10px;
      margin-top: 10px;
      font-size: 16px;
      transition: all 0.1s ease-in-out;

      &:hover {
        background-color: #e0dcdc;
      }
    }
  }
}
</style>